import { View, Text, Image } from 'react-native'
import React from 'react'
import { Stack, useRouter } from 'expo-router'
import { zhThemeColor } from '../../global'

export default function _layout() {
  // 在函数式组件最外层,调用钩子，获得路由器对象，用于页面跳转
  let router = useRouter()

  return (
    // mall目录下的页面采用栈式导航，都有类似的顶部导航栏
    // Stack.ScreenOptions用于配置当前目录下所有页面的共性
    // Screen.Options用于配置当前页面的专有个性
    <Stack screenOptions={{
      headerStyle:{
        backgroundColor:zhThemeColor   //导航条背景颜色
      },
      headerTintColor:'#fff',   //导航条染色颜色(即文本颜色)
      headerTitleStyle:{fontSize:16} ,  //导航条标题文本样式大小
      headerTitleAlign:'center',   //居中展示标题
      
    }}>
      <Stack.Screen 
      name="list"   //指定当前页面的路由地址,应该与当前文件名一致
      options={{
        title:'商品列表',
        headerLeft:()=>(<Text onPress={()=>router.back()} style={{color:'#fff'}}>返回</Text>),   //标题栏左侧要显示的内容
        headerRight:()=>(<></>),    //标题栏右侧要显示的内容
        // headerTitle:()=>(<Image style={{width:40,height:40}} source={require('../../assets/img/logo.png')}/>)
      
      }}/>
      <Stack.Screen 
      name="detail"  //指定当前页面的路由地址,应该与当前文件名一致
      options={{
        title:'商品详情',
      }}/>
    </Stack>
  )
}